<template>
  <div>计算和: {{ count }}</div>
  <div>我收到了{{ uMsg }}</div>
  <div><button @click="reMsg">点我获得下一句</button></div>
</template>

<!-- <script>
import eventBus from '@/utils/eventBus'
export default {
  name: 'Child2',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    setData(param) {
      console.log('param: ', param)
      this.count = this.count + param.num
    }
  },
  mounted() {
    eventBus.on('addition', this.setData)
  },
  beforeUnmount() {
    // 在组件销毁前，从事件总线中移除事件监听
    console.log('移除事件监听者')
    eventBus.off('addition', this.setData)
  }
}
</script> -->
<script setup>
import eventBus from '@/utils/eventBus'
import { ref, onBeforeUnmount, onMounted } from 'vue'
const count = ref(0)
const uMsg = ref('')
const setData = (param) => {
  console.log('param: ', param)
  count.value += param.num
}
const useMsg = (param) => {
  console.log('我收到了' + param.msg)
  uMsg.value = param.msg
}
const reMsg = () => {
  eventBus.emit('rMsg', {
    rMsg: '多愁多恨亦悠悠'
  })
}
eventBus.on('addition', setData)
eventBus.on('sm', useMsg)
onBeforeUnmount(() => {
  // 在组件销毁前，从事件总线中移除事件监听
  console.log('移除事件监听者1')
  eventBus.off('addition', setData)
  eventBus.off('sm', useMsg)
})
onMounted(() => {
  eventBus.emit('init', {
    num: 0
  })
})
</script>
